@charset "utf-8";

@import '../../theme.scss';

.x-actionsheet {
  align-items: flex-end !important;

  .x-modal__inner {
    background: var(--x-panel-bg-color);
  }

  &__title {
    width: 100%;
    padding: px(20) 0;
    min-height: px(90);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: px(1) solid var(--x-border-color);
    font-size: px(26);
  }

  &__item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: px(1) solid var(--x-border-color);
    font-size: px(30);
  }

  &__item-con {
    width: 100%;
    padding: px(20) px(40);
  }

  &__button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: px(100);
    width: 100%;
    color: var(--x-text-color);
    font-size: px(30);
    transition: all 0.2s ease-out;

    &:active {
      background: rgba(0, 0, 0, 0.05);
      opacity: 1;
    }
  }

  &__closebtn {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--x-text-color-o50);
    width: 100%;
    height: px(100);
    border-top: px(1) solid var(--x-border-color);
    font-size: px(30);
    transition: all 0.2s ease-out;

    &:active {
      background: rgba(0, 0, 0, 0.05);
      opacity: 1;
    }
  }

  &.x-modal--enter {
    .x-modal__bg {
      opacity: 1;
    }

    .x-modal__inner {
      animation: __x_actionsheet_slideup_enter cubic-bezier(0.5, 0, 0.3, 1) 0.3s;
    }
  }

  &.x-modal--leave {
    .x-modal__bg {
      opacity: 0;
    }

    .x-modal__inner {
      animation: __x_actionsheet_slideup_leave cubic-bezier(0.5, 0, 0.3, 1) 0.3s;
    }
  }
}

@keyframes __x_actionsheet_slideup_enter {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes __x_actionsheet_slideup_leave {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(100%);
  }
}
